<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM综合练习</title>
    <script>
        function addEmp(){
            let name = document.getElementById("name").value;
            let salary = document.getElementById("salary").value;
            let emp = document.getElementById("emp");
            // emp.innerHTML = emp.innerHTML+"<tr><td>"+name+"</td><td>"+salary+"</td><td><a href='javascript:;'>删除</a></td></tr>";

            // 创建tr
            let trChild = document.createElement("tr");
            // 创建td
            let nameTd = document.createElement("td");
            let salaryTd = document.createElement("td");
            let operateTd = document.createElement("td");
            // 创建文本
            let nameText = document.createTextNode(name);
            let salaryText = document.createTextNode(salary);
            // 创建超链接
            let aChild = document.createElement("a");
            let aText = document.createTextNode("删除")
            // 将超链接文本添加到超链接中
            aChild.appendChild(aText);
            // 赋予超链接属性
            aChild.href = "javascript:;";
            aChild.onclick = function(){
                // 此处的this表示的是触发事件的元素,此处即为超链接
                // 可以通过this找到超链接所在的行,删除这一行
                this.parentNode.parentNode.remove();
            };

            // 将列中的元素添加到列
            nameTd.appendChild(nameText);
            salaryTd.appendChild(salaryText);
            operateTd.appendChild(aChild);
            // 将列添加到行中
            trChild.appendChild(nameTd);
            trChild.appendChild(salaryTd);
            trChild.appendChild(operateTd);
            // 将行添加到表格中
            emp.appendChild(trChild);
        }
    </script>
</head>
<body>
<h2>添加员工信息</h2>
姓名:<input type="text" id="name"><br>
工资:<input type="text" id="salary"><br>
<button onclick="addEmp()">添加</button>
<hr>

<table id="emp" border="1" style="width: 500px;background-color: #dddddd;">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
<!--    <tr>-->
<!--        <td>admin</td>-->
<!--        <td>8000</td>-->
<!--        <td>-->
<!--            <a href="javascript:;">删除</a>-->
<!--        </td>-->
<!--    </tr>-->
</table>
</body>
</html>